<!--
 * @Date: 2021-05-27 12:29:22
 * @LastEditTime: 2021-08-16 14:48:25
-->
<template>
  <div v-loading="loading" class="app-container fba-allot-order-config">
    <el-divider content-position="left">
      <h3>FBA调拨单配置</h3>
    </el-divider>
    <el-form :ref="formName" :model="form" :rules="rules" label-width="100px" style="width: 600px">
      <el-form-item label="贴标费" prop="fbaAllotOrderConfig.label_price">
        <el-input-number v-model="form.fbaAllotOrderConfig.label_price" :min="0" :precision="2" :controls="false" class="tal wfull" />
      </el-form-item>
      <el-form-item label="打托费" prop="fbaAllotOrderConfig.pallet_price">
        <el-input-number v-model="form.fbaAllotOrderConfig.pallet_price" :min="0" :precision="2" :controls="false" class="tal wfull" />
      </el-form-item>
      <el-form-item label="出库费" prop="fbaAllotOrderConfig.outbound_price">
        <el-input-number v-model="form.fbaAllotOrderConfig.outbound_price" :min="0" :precision="2" :controls="false" class="tal wfull" />
      </el-form-item>
    </el-form>
    <div class="tac">
      <span v-action="'config@save'">
        <el-button type="primary" :loading="btnLoading" @click="submit">保存</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
export default {
  name: 'FbaAllotOrderConfig',
  directives: {
    action
  },
  data() {
    return {
      loading: false,
      formName: 'fbaAllotOrderForm',
      form: {
        fbaAllotOrderConfig: {
          label_price: '',
          outbound_price: '',
          pallet_price: ''
        },
        parent: 'fbaAllotOrderConfig'
      },
      rules: {
        label_price: [
          { required: true, message: '请输入贴标费', trigger: 'blur' }
        ],
        outbound_price: [
          { required: true, message: '请输入打托费', trigger: 'blur' }
        ],
        pallet_price: [
          { required: true, message: '请输入出库费', trigger: 'blur' }
        ]
      },
      btnLoading: false
    }
  },
  created() {
    const vm = this
    vm.getConfig()
  },
  methods: {
    // 获取系统配置
    getConfig() {
      const vm = this
      vm.loading = true
      vm.$http.get('/config/fbaAllotOrderConfig').then(res => {
        const { label_price, outbound_price, pallet_price } = res.data.fbaAllotOrderConfig
        vm.form.fbaAllotOrderConfig.label_price = label_price
        vm.form.fbaAllotOrderConfig.pallet_price = pallet_price
        vm.form.fbaAllotOrderConfig.outbound_price = outbound_price
        vm.loading = false
      }).catch(() => {
        vm.loading = false
      })
    },
    // 提交
    submit() {
      const vm = this
      vm.$refs[vm.formName].validate(valid => {
        if (valid) {
          vm.btnLoading = true
          vm.$http.post('/config', vm.form).then(res => {
            vm.$message.success('设置成功')
            vm.btnLoading = false
          }).catch(() => {
            vm.btnLoading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
